<title>登录</title>
<style>
    input {
        margin-top: 20px;
        border-radius: 2px;
    }

    form {
        border-radius: 10px;
    }

    form>input {
        border: none;
    }

    .button {
        background-color: green;
        padding: 5px;
        border: none;
    }
</style>

<body style="background-image: linear-gradient(to top, #9890e3 0%, #b1f4cf 100%);">
    <div>
        <form style="background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%); 
     height: 250px; width: 250px; color: white; text-align:center;
    margin: 0 auto; padding: 5px;">
            <h3> 欢迎使用某某系统</h3>
            <label for="sn">学号:</label>
            <input type="text" name="" value="" id="sn">
            <br>
            <label for="pswd">密码:</label>
            <input type="password" name="" value="" id="pswd">
            <br>
            <input onclick="login()" value="登录" class="button" type="button"></input>
            <input type="reset" class="button"></input>
            <br>
            <input type="button" value="新用户注册" onclick="window.location.href='/zhuce'"> </input>
        </form>
    </div>
    <div id="userinfo">

    </div>
</body>
<script>
    function login() {
        let sn = document.getElementById("sn").value;
        let pswd = document.getElementById("pswd").value;
        // 将sn 和pswd 发送给后端
        fetch("/yanzhengLogin?sn=" + sn + "&pswd=" + pswd)
            .then(resp => resp.json())//解析
            .then(data => { //后续业务处理
                if (data == null) {
                    alert("登录失败");
                } else {
                    localStorage.setItem("user", JSON.stringify(data));
                    document.getElementById("userinfo").innerText = "欢迎你：" + data.Name + " ，性别是：" + data.Sex + " sn:" + data.Sn;
                    window.location.href = "/";
                }
            }
            )
    }
</script>